<template>
  <div class="app-container">
    <!--查询列-->
    <el-form v-show="showSearch" ref="queryForm" :model="queryParams" :inline="true" label-width="68px">
      <el-form-item label="项目" prop="projectName">
        <el-input
          v-model="queryParams.projectName"
          placeholder="请输入项目"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="操作人员" prop="createBy">
        <el-input
          v-model="queryParams.createUid"
          placeholder="请输入操作人员"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="创建时间">
        <el-date-picker
          v-model="promotionDate"
          size="small"
          style="width: 240px"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="cyan" icon="el-icon-search" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <!--操作列-->
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" icon="el-icon-plus" @click="handleAdd()">新增</el-button>
      </el-col>
      <right-toolbar :show-search.sync="showSearch" @queryTable="getList" />
    </el-row>
    <!--数据表列-->
    <el-collapse v-for="item in list" :key="item.id" v-model="activeName" accordion>
      <el-collapse-item :title="item.scheduleDate +'   --   '+ item.scheduleName" :name="item.id">
        <el-table :data="item.scheduleList" fit highlight-current-row style="width: 100%;" @sort-change="sortChange">
          <el-table-column label="日期" width="120px">
            <template slot-scope="{row}">
              <span>{{ row.scheduleDate }}</span>
            </template>
          </el-table-column>
          <el-table-column label="归属" width="80px" align="center">
            <template slot-scope="{row}">
              <span>{{ row.ascription }}</span>
            </template>
          </el-table-column>
          <el-table-column label="端口" width="120px" align="center">
            <template slot-scope="{row}">
              <span>{{ row.interfaced }}</span>
            </template>
          </el-table-column>
          <el-table-column label="订单" width="250px" align="center">
            <template slot-scope="{row}">
              <span>{{ row.sourceOrder }}</span>
            </template>
          </el-table-column>
          <el-table-column label="链接名称" width="200px" align="center">
            <template slot-scope="{row}">
              <span>{{ row.linkName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="链接" width="300px" align="center" show-overflow-tooltip>
            <template slot-scope="{row}">
              <span>{{ row.linkUrl }}</span>
            </template>
          </el-table-column>
          <el-table-column label="当前额度" width="180px" align="center">
            <template slot-scope="{row}">
              <span>{{ row.currentAmount }}</span>
            </template>
          </el-table-column>
          <el-table-column label="额度" width="180px" align="center">
            <template slot-scope="{row}">
              <span>{{ row.amount }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="200" class-name="small-padding fixed-width" fixed="right">
            <template slot-scope="{row,$index}">
              <el-button type="text" size="mini" icon="el-icon-edit" @click="handleUpdate(row,$index)">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import { Notification } from 'element-ui'
import { tableInfo, crudUtil, sortUtil } from '@/utils/future/toolkit'
import { fetchScheduleList } from '@/api/purch/purchSchedule'

export default {
  name: 'PurchSchedule',

  data() {
    const tableData = {
      activeName: '1',
      showSearch: true, // 显示搜索条件
      queryParams: {
        scheduleName: undefined,
        createUid: undefined
      },
      promotionDate: []

    }
    return Object.assign(tableData, tableInfo)
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      var that = this
      const queryParams = that.addDateRange(this.queryParams, this.promotionDate)
      that.queryParams = queryParams
      fetchScheduleList(that.queryParams).then(res => {
        this.list = res
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.promotionDate = []
      this.resetForm('queryForm')
      this.handleQuery()
    },

    handleAdd() {
      var that = this
      this.$router.push({ name: 'UploadSchedule', query: {}})
    },
    handleUpdate(row, idnex) {
      var that = this
      this.$router.push({ name: 'ScheduleUpdate', query: { scheduleId: row.id }})
    },
    sortChange(data) {
      const { prop, order } = data
      if (prop === 'id') {
        sortUtil.sortByID(order)
      }
    }
  }
}
</script>
